<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>监测点数据</title>
    <style>
        .nicescroll-rails.nicescroll-rails-vr{
            background: transparent!important;
            left:2.715rem!important;
        }
    </style>
</head>
<body>
    <div class="right-top-tools" style="height:50px">
        <div class="zd-tab clearfix" style="height:50px">
           <span style="color:#3c619e;font-weight: bold">自动监测数据查询  </span>
        </div>
    </div>
	<div class="right-top-tools" style="margin-bottom:20px">
		<div class="data-class-btns clearfix">
			<div id="tbl_surface_move_device_data" class="class-btn active" station_type="14">
				<div class="icon icon-bg wy">
					<div class="pic"></div>
				</div>
				位移监测
			</div>
			<div id="tbl_deep_move_device_data" class="class-btn" station_type="5">
				<div class="icon icon-bg xz">
					<div class="pic"></div>
				</div>
				深度位移
			</div>
			<div id="tbl_rain_device_data" class="class-btn" station_type="1">
				<div class="icon icon-bg yl">
					<div class="pic"></div>
				</div>
				雨量监测
			</div>
			<div id="tbl_water_device_data" class="class-btn" station_type="2">
				<div class="icon icon-bg ot">
					<div class="pic"></div>
				</div>
				含水率监测
			</div>
			<div id="tbl_pressure_device_data" class="class-btn" station_type="20">
                <div class="icon icon-bg sy">
                    <div class="pic"></div>
                </div>
 				渗压监测
            </div>
            <div id="tbl_flow_device_data" class="class-btn" station_type="200">
                <div class="icon icon-bg ll">
                    <div class="pic"></div>
                </div>
				流量监测
            </div>
		</div>
		<div class="zd-tab clearfix z1">
			<div id="devices_tabs">
			</div>
			<div class="draptop"></div>
		</div>
		<div class="right-top-tools-open"></div>														
	</div>
    <div class="table-container" style="margin-top:0px">
        <div class="table-tool disno">
	        <div id="reportrange" class="pull-left">
	            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
	            <span></span> <b class="caret"></b>
	        </div>
	        <!-- ONE_HOUR  TWO_HOUR  DAY  MONTH
	        <select name="time-gap" id="time-select">
	            <option value="ONE_HOUR" selected>1小时</option>
	            <option value="TWO_HOUR">2小时</option>
	            <option value="FOUR_HOUR">4小时</option>
	            <option value="DAY">1天</option>
	            <option value="MONTH">1月</option>
	        </select>
	         -->
	        <div id="search_data" class="search-at">查询</div>
	        <div id="export_data" class="search-at">导出</div>
    	</div>
        <div class="table-tab clearfix">
            <div class="tab current" id="latest">最新数据</div>
            <div class="tab ls-data" id="history">历史数据</div>
            <div class="tab" id="rawdata">原始数据</div>
        </div>
        <table id="devicedata_table" class="display" cellspacing="0" width="100%" style="text-align:center">
            <thead id="devicedata_table_header">
            	<tr></tr>
            </thead>
        </table>
   </div>

<script type="text/javascript">
	var dataTimeType = "latest";//最新数据
	var Dtable_project = null;
	var dataType = null;
	var station_type = null;
	var device = null;
	var search_start_time = null;
	var search_end_time = null;
	
    $(".class-btn").click(function(){
    	dataType = this.id;
    	$(".class-btn").removeClass("active");
        $(this).addClass("active");
        device = null;
        station_type = $(this).attr("station_type");
        loadDevices();
    });
    $(".table-tab").on("click",".tab",function(){
    	dataTimeType = this.id;
        $(this).addClass("current").siblings(".tab").removeClass("current");
        if($(this).hasClass("ls-data")){
            $(".table-tool").show();
        }else{
            $(".table-tool").hide();
        }
        showDataTable();
    });
    var theight=0;
    $(".draptop").on("click",function(){
        theight=$(".right-top-tools")[0].clientHeight;
        $(".right-top-tools").animate({'height':"0px"});
        setTimeout(function(){
            $(".right-top-tools-open").show();
        },200);
    });
    $(".right-top-tools-open").on("click",function(){
        $(".right-top-tools").animate({'height':theight+'px'},200,"linear",function(){
            $(".right-top-tools").css({'height':"auto"});
        });
        $(this).hide();
    });	
	function search(){
		Dtable_project.ajax.reload()
	}
	function likeFilterReset(){
		$("#likeFilter").val("")
	}
	//获取表格请求的URL
	function getDatatableListUrl(){
		if( dataType == "tbl_deep_move_device_data" ){
			return "../../tbl_deep_move_device_data";
		}else if( dataType == "tbl_rain_device_data" ){
			return "../../tbl_rain_device_data";
		}else if( dataType == "tbl_surface_move_device_data" ){
			return "../../tbl_surface_move_device_data";
		}else if( dataType == "tbl_water_device_data" ){
			return "../../tbl_water_device_data";
		}else if( dataType == "tbl_pressure_device_data" ){
			return "../../tbl_pressure_device_data";
		}else if( dataType == "tbl_flow_device_data" ){
			return "../../tbl_flow_device_data";
		}
	}
	//获取表格请求的URL
	function setDatatableHeader( fn ){
		var header = "";
		if( dataType == "tbl_deep_move_device_data" ){
			header = "<tr>" + getHeaderHtml( "设备,A位移,B位移,数据处理时间,数据采集时间" ) + "</tr>";
		}else if( dataType == "tbl_rain_device_data" ){
			header = "<tr>" + getHeaderHtml( "设备,日降雨量,总降雨量,数据处理时间,数据采集时间" ) + "</tr>";
		}else if( dataType == "tbl_surface_move_device_data" ){
			header = "<tr>" + getHeaderHtml( "设备,X轴位移,Y轴位移,Z轴位移,数据处理时间,数据采集时间" ) + "</tr>";
		}else if( dataType == "tbl_water_device_data" ){
			header = "<tr>" + getHeaderHtml( "设备,含水率,数据处理时间,数据采集时间" ) + "</tr>";
		}else if( dataType == "tbl_pressure_device_data" ){
			header = "<tr>" + getHeaderHtml( "设备,渗压值,数据处理时间,数据采集时间" ) + "</tr>";
		}else if( dataType == "tbl_flow_device_data" ){
			header = "<tr>" + getHeaderHtml( "设备,含水率,数据处理时间,数据采集时间" ) + "</tr>";
		}
		$("#devicedata_table_header").html(header);
		if( fn ){
			fn();
		}
	}
	//获取数据展示的列名
	function getDatatableColumns(){
		var columnString = null;
		if( dataType == "tbl_deep_move_device_data" ){
			columnString = "station_name,a_move_value,b_move_value,handle_time,observe_time";
		}else if( dataType == "tbl_rain_device_data" ){
			columnString = "station_name,day_rain_value,total_rain_value,handle_time,observe_time";
		}else if( dataType == "tbl_surface_move_device_data" ){
			columnString = "station_name,x_move_value,y_move_value,z_move_value,handle_time,observe_time";
		}else if( dataType == "tbl_water_device_data" ){
			columnString = "station_name,water_value,handle_time,observe_time";
		}else if( dataType == "tbl_pressure_device_data" ){
			columnString = "station_name,kpa_value,handle_time,observe_time";
		}else if( dataType == "tbl_flow_device_data" ){
			columnString = "station_name,water_value,handle_time,observe_time";
		}
		var columnList = [];//显示列对应的json字段       
        var colArr = columnString.split(',');
        for (var i = 0; i < colArr.length; i++) {
            var obj = {};
            obj['data'] = colArr[i];
            columnList.push(obj);
        }
        return columnList;
	}
	
	function getHeaderHtml( columnString ){
		var header = "";
		var colArr = columnString.split(',');
		for ( var i = 0; i < colArr.length; i++) {
			header +="<th style=\"text-align:center\">"+colArr[i]+"</th>";
	    }
		return header;
	}
	
	//组织一个datatables的setting对象
	function getDatatableSettings(){
		var _pagesize = 10;
    	var _url = getDatatableListUrl() + "/list";
		var setting =  {
		    "info":0,
		    "pageLength": _pagesize,
		    "lengthChange":false,
		    "searching":false,
		    "ordering":true,
		    "processing": true,
		    "serverSide": true,
		    "destroy":true,
		    "ajax": { 
		     	url: _url,  
		        type: "post",
		        contentType: "application/json",
		        dataType: "json",
		        data: function( data ) {
		            if( data.order && data.order.length > 0 && data.columns && data.columns.length > 0 ){
		            	data.orderIndex = data.order[0].column;
		            	if( data.columns.length >= ( data.orderIndex + 1 )){
		            		data.orderColName = data.columns[data.orderIndex].data;
		            	}
		            	data.orderType = data.order[0].dir;
		            }
		            //处理组织起来的只显示用的列进行排序的情况
		            if( data.orderColName == "areaname" ){
		            	data.orderColName = "area_code";
		            }
		            if( data.orderColName == "station_name" ){
		            	data.orderColName = "device_id";
		            }
		            //模糊查询
		            if( $("#likeFilter").val() != null && $("#likeFilter").val() != "" ){
		            	data.likeFilter = $("#likeFilter").val();
		            }
		            if( "history" == dataTimeType ){
		            	 data.search_start_time = search_start_time;
				         data.search_end_time = search_end_time;
		            }
		            data.dataTimeType = dataTimeType;
		            data.device_id = device;
		            data.page = data.start/data.length + 1;
		            data.pagesize = _pagesize;
		            return JSON.stringify(data);
		        },
		        dataSrc: function ( json ) {
		           	$(json.data).each(function(){
		           		if( this.observe_time ){
		           			this.observe_time = new Date(this.observe_time).format("yyyy-MM-dd hh:mm:ss");
		           		}
		           		if( this.handle_time ){
		           			this.handle_time = new Date(this.handle_time).format("yyyy-MM-dd hh:mm:ss");
		           		}
		            });
		            json.recordsTotal = json.pagination.totalRecord;
		            json.recordsFiltered = json.pagination.totalRecord;
		            return json.data;
		           }
		    },
		    "columns": getDatatableColumns( dataType ),
		    "language": {
		        "paginate": {
		            "next": "下一页",
		            "previous": "上一页",
		        }
		    }
		} 
		return setting;
	}
	
	//加载一个数据表格
	function showDataTable(){
		setDatatableHeader( function(){
			Dtable_project = $('#devicedata_table').DataTable( getDatatableSettings() );
		});
	}
	
	function devices_tabClick(btn){
		$(".device_tab").removeClass("device_tab_clicked");
        $("#"+btn.id).addClass("device_tab_clicked");
    	device = btn.id;
        showDataTable()
    }
	
	function loadDevices( selected_station_id ){
		var param = {};
		param.station_type = station_type;
		param.tree_level = global.device_data_tree_selected_level;
		param.tree_id = global.device_data_tree_selected_id;
		var json_data = JSON.stringify(param);
		var url = "../../tbl_station_info/list";
		$.ajax({
			url: url,
			type : 'post',
		    async : false,
			data: json_data,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function( json ) {
				var html="";
				if( json.data ){
					$(json.data).each(function(){
						//html += "<div class=\"device_tab\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
						if( selected_station_id != null && this.station_id == selected_station_id ){
							html += "<div class=\"device_tab device_tab_clicked\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
					    	device = this.station_id;
						}else{
							html += "<div class=\"device_tab\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
						}
					});
					html += "<div class=\"draptop\"></div>"; 
					$("#devices_tabs").html(html);
				}
				if( json.data.length > 0 ){
					showDataTable();
				}else{
					$('#devicedata_table').html("");
				}
			}
		});
	}
	
    $(document).ready(function(){
    	dataType = $(".class-btn.active").attr("id");
    	station_type = $(".class-btn.active").attr("station_type");
    	
    	if( global.search_station_type != null ){
        	$(".class-btn").each(function(){
        		if( $(this).attr("station_type") == global.search_station_type ){
        			dataType = this.id;
        	    	$(".class-btn").removeClass("active");
        	        $(this).addClass("active");
        	        station_type = $(this).attr("station_type");
        		}
        	});
        }
    	
    	//加载第一种类型数据所涉及到的设备信息
    	loadDevices( global.search_station_id );
    	//加载一个数据表格
    	//showDataTable();
	        	
	    $('#devicedata_table tbody').on( 'click', 'tr', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }else {
                $('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        } );
	    
	    $("#search_data").click(function(){
	    	showDataTable();
	    });
	    
	    $("#export_data").click(function(){
	    	if(device == null) {
	    		alert("请先选择一个设备！")
	    		return false;
	    	}
	    	window.open(getDatatableListUrl() + "/export?deviceId=" + device + "&startTime=" + search_start_time 
	    			+ "&endTime=" + search_end_time);
	    });
    });
    
	//rangedate
    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
    	search_start_time = start.format('YYYY-MM-DD') + " 00:00:00";
    	search_end_time = end.format('YYYY-MM-DD') + " 23:59:59";
        $('#reportrange span').html( start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') );
    }
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
            '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '最近一周': [moment().subtract(6, 'days'), moment()],
            '最近30天': [moment().subtract(29, 'days'), moment()],
            '当月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale : {
            applyLabel : '确定',
            cancelLabel : '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月' ],
            firstDay : 1
        }
    }, cb );
    cb( start, end );
    
</script>
</body>
</html>